﻿@using WebApp.Controllers
@using WebApp.Extensions
@model Dto.ApiResponses.PageResponse<Dto.ApiResponses.LeadResponses.LeadLine>﻿
@{
    ViewBag.CurrentPage = WebApp.Common.PageSetting.LeadListPageSetting;    
}

@{ var sectionId = (Request.IsAjaxRequest() ? "Ajax" : "View") + "_Lead_Index"; }

@section Scripts{
    <script type="text/javascript">
        require(['Lead/Index', 'Util'], function (api, util) {
            var model = util.toJS(@(Html.ToJson(Model)));
            $(function () { api.exec('@sectionId', model); });
        });
    </script>
}

@section QuickLinks{
    <a class="btn btn-primary btn-lg" href="@(Url.Action<LeadController>(x => x.Add()))">Add</a>
    <!-- Button trigger modal -->
    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#searchHelpModal">
        Search Help
    </button>
}

<div class="container" data-bind="stopbinding: true">
    <section id="@sectionId">
        <div class="row">
            <form class="form-horizontal">
                <fieldset>
                    <legend>Search filter</legend>
                    <div class="row">
                        <div class="form-group col-md-4">
                            <label class="col-md-6 control-label" for="filterColumn">Filter Column</label>
                            <div class="col-md-6">
                                <select class="form-control" name="filterColumn" data-bind="options: filterColumns, value: filterColumn"></select>
                            </div>
                        </div>
                        <div class="form-group col-md-4">
                            <label class="col-md-6 control-label" for="filterType">Filter Type</label>
                            <div class="col-md-6">
                                <select name="filterType" class="form-control" data-bind="options: filterTypes, value: filterType"></select>
                            </div>
                        </div>
                        <div class="form-group col-md-4">
                            <label class="col-md-6 control-label" for="filterValue">Filter Value</label>
                            <div class="col-md-6">
                                <input type="text" name="filterValue" class="form-control" data-bind="value: filterValue, valueUpdate: 'afterkeydown', executeOnEnter: search" placeholder="Column Value" />
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group col-md-4">
                            <label class="col-md-6 control-label" for="filterColumn">Filter Date</label>
                            <div class="col-md-6">
                                <select class="form-control" data-bind="options: filterDateColumns, value: filterDateColumn"></select>
                            </div>
                        </div>
                        <div class="form-group col-md-4">
                            <label class="col-md-6 control-label" for="filterType">From</label>
                            <div class="col-md-6">
                                <input type="text" class="form-control" data-bind="datepicker: filterDateStart, valueUpdate: 'afterkeydown', executeOnEnter: search" placeholder="Column Value" />
                            </div>
                        </div>
                        <div class="form-group col-md-4">
                            <label class="col-md-6 control-label" for="filterValue">To</label>
                            <div class="col-md-6">
                                <input type="text" class="form-control" data-bind="datepicker: filterDateEnd, valueUpdate: 'afterkeydown', executeOnEnter: search" placeholder="Column Value" />
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group col-md-4">
                            <label class="col-md-6 control-label" for="sortColumn">Sort Column</label>
                            <div class="col-md-6">
                                <select class="form-control" name="sortColumn" data-bind="options: sortColumns, value: sortColumn"></select>
                            </div>
                        </div>
                        <div class="form-group col-md-4">
                            <label class="col-md-6 control-label" for="sortType">Sort Type</label>
                            <div class="col-md-6">
                                <select class="form-control" name="sortType" data-bind="options: sortTypes, value: sortType"></select>
                            </div>
                        </div>
                        <div class="form-group col-md-4 center">
                            <button data-bind="click: search" class="btn btn-default btn-lg btn-primary" type="button">Go!</button>
                            <button data-bind="click: startDownload" class="btn btn-default btn-lg" type="button">Download</button>
                        </div>
                    </div>
                </fieldset>
            </form>
        </div>

        <div data-bind="visible : leads().length>0" class="row spacer" style="display: none">
            <div id="table-container">
                <table class="table table-bordered table-hover table-condensed" style="background: white;display: none" data-bind="visible : leads().length>0">
                    <thead>
                        <tr>
                            <th data-bind='click: function () { SortItems("Name"); }'>Name</th>
                            <th data-bind='click: function () { SortItems("CompanyName"); }'>Company Name</th>
                            <th data-bind='click: function () { SortItems("Email"); }'>Email Address</th>
                            <th data-bind='click: function () { SortItems("Phone"); }'>Phone Number</th>
                            <th>Delete</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- ko foreach: leads -->
                        <tr>
                            <td><a href="#" data-bind="text: name,attr:{'href':'/lead/show?id=' + id()}"></a></td>
                            <td><span data-bind="text: companyName"></span></td>
                            <td><span data-bind="text: emailAddress"></span></td>
                            <td><span data-bind="text: phone"></span></td>
                            <td><button class="btn btn-primary" data-bind="click:$root.deleteRecord"><i class="icon icon-trash-o"></i></button></td>
                        </tr>
                        <!-- /ko -->
                    </tbody>
                </table>
            </div>
            <form class="form-horizontal ">
                <button class="btn btn-lg btn-primary" data-bind="click: firstPage"><i class="icon icon-backward"></i></button>
                <button class="btn btn-primary" data-bind="click: previousPage"><i class="icon icon-chevron-left "></i></button>
                <input type="text" class="form-control" style="width:45px;display:inline;" data-bind="value: pageIndex, submit: search " />
                of total <span data-bind="text: totalPages"></span>pages.<button class="btn btn-primary" data-bind="click: nextPage"><i class="icon icon-chevron-right "></i></button>
                <button class="btn btn-lg btn-primary" data-bind="click: lastPage"><i class="icon icon-forward "></i></button>
                Total
                <span data-bind="text: totalRecords"></span>&nbsp;records found.&nbsp;&nbsp;Page Size
                <input type="text" class="form-control" style="width: 45px; display: inline; " data-bind="value: pageSize, submit: search" />
            </form>
        </div>
        <div data-bind="visible: leads().length == 0" class="row spacer">
            <span>No Records found.</span>
        </div>
    </section>
</div>
